<!-- 赛程信息 -->
<template>
  <div class="app-container">
    查询游戏名称
    <!-- 查询框区域 -->
    <el-select
      v-model="name"
      filterable
      placeholder="游戏名称"
      @change="getContestCondition"
    >
      <el-option
        v-for="item in gamename"
        :key="item"
        :label="contestTable.contestName"
        :value="item"
      >
      </el-option>
    </el-select>
    <!-- 比赛表区域 -->
    <el-table
      :header-cell-style="{ background: '#B6DBF2', color: '#606266' }"
      :data="contestTable"
      border
      style="width: 100%"
    >
      <el-table-column prop="contestName" label="比赛游戏" width="200">
      </el-table-column>
      <el-table-column prop="contestMerchants" label="比赛供应商" width="200">
      </el-table-column>
      <el-table-column prop="startTime" label="比赛时间" width="200">
      </el-table-column>
      <el-table-column prop="signupTotal" label="报名人数" width="200">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            round
            v-if="isContestIndex"
            size="mini"
            @click="contest(scope.$index, scope.row)"
            >报名参加</el-button
          >
          <el-button
            round
            v-else
            size="mini"
            @click="outcontest(scope.$index, scope.row)"
            >取消报名</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页条区域 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[2, 3, 5, 10]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 图片区域 -->
    <div class="imgBg_box">
      <img class="imgBg" src="@/assets/img/2.jpg" alt="" />
    </div>
  </div>
</template>

<script>
import conteststartApi from "@/api/merchant/conteststart";
import contestloginApi from "@/api/contestlogin";
import ucenterMemberApi from "@/api/ucenter/ucenterMember";
import merchantApi from "@/api/merchant/merchant";

export default {
  data() {
    return {
      // 条件查询带分页数据
      current: 1, // 当前页
      limit: 5, // 分几页
      name: "", // 查询名称条件
      // 显示哪个页面 true：报名参加    false：取消报名
      isContestIndex: true,
      // 存放比赛表对象集合
      contestTable: [],
      total: 0, // 总页数
      // 游戏名称
      gamename: [],
    };
  },
  methods: {
    // 根据选择比赛名字分页查询
    getContestCondition(name) {
      this.name = name;
      this.getContestPage();
    },
    // 条件分页查询
    getContestPage() {
      conteststartApi
        .getContestTablePage(this.current, this.limit, this.name)
        .then((response) => {
          if (response.code !== 200) {
            return this.$message.error("加载比赛列表失败");
          }
          this.contestTable = response.data.rows;
          this.total = response.data.total;
        });
    },
    // 页数查询
    handleSizeChange(val) {
      this.limit = val;
      this.getContestPage();
    },
    // 当前页查询
    handleCurrentChange(val) {
      this.current = val;
      this.getContestPage();
    },
    // 报名参加
    contest(index, item) {
      this.$confirm(
        `您确定要报名参加${item.startTime}点${item.contestName}比赛吗`,
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // 查询当前用户 ID
          contestloginApi
            .getMemberInfo(this.$cookie.get("token"))
            .then((response) => {
              if (response.code !== 200) return;
              // 如果用户已经报名
              if (
                response.data.userInfo.isParameter != null &&
                response.data.userInfo.isParameter != 0
              ) {
                this.$message({
                  message: "您只能报名一场比赛，您已经报名过了",
                  type: "warning",
                });
                return;
              }
              // 调用用户报名接口
              ucenterMemberApi
                .registerContest(response.data.userInfo.id, item.id)
                .then((response) => {
                  if (response.code !== 200) return;
                  this.isContestIndex = false;
                  this.$message({
                    message: "报名成功，请准时参加比赛",
                    type: "success",
                  });
                });
              // 过一秒钟刷新展示页面(后端OpenFeign远程调用需要时间)
              setTimeout(() => {
                this.getContestPage();
              }, 1000);
            });
        })
        .catch(() => {});
    },
    // 取消报名
    outcontest(index, item) {
      this.$confirm(`您确定要取消报名比赛吗`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // 查询用户报名信息
        contestloginApi
          .getMemberInfo(this.$cookie.get("token"))
          .then((response) => {
            if (response.code !== 200) return;
            // 如果用户没有报名
            if (
              response.data.userInfo.isParameter == null &&
              response.data.userInfo.isParameter == 0
            ) {
              this.$confirm(
                "如果您看到这个提示，请联系管理员(服务器出现异常)",
                {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                }
              );
            }
            // 根据查询出用户报名的赛程ID，查询赛程信息
            // 把用户报名的赛程ID 改成 0
            // 把赛程信息的报名人数 - 1
            ucenterMemberApi
              .outRegisterContest(response.data.userInfo)
              .then((response) => {
                if (response.code !== 200) return;
                this.isContestIndex = true;
                this.$message({
                  message: "取消报名成功",
                  type: "success",
                });
              });
            // 过一秒钟刷新展示页面(后端OpenFeign远程调用需要时间)
            setTimeout(() => {
              this.getContestPage();
            }, 1000);
          });
      });
    },
    // 查看当前报名状态
    showContestState() {
      contestloginApi
        .getMemberInfo(this.$cookie.get("token"))
        .then((response) => {
          if (response.code !== 200) return;
          // 判断当前用户是否已经报名
          if (
            response.data.userInfo.isParameter != null &&
            response.data.userInfo.isParameter != 0
          ) {
            this.isContestIndex = false;
          } else {
            this.isContestIndex = true;
          }
        });
    },
  },
  created() {
    // 查询比赛列表
    this.getContestPage();
    // 查询报名状态
    this.showContestState();
    // 查询游戏名称
    merchantApi.getGameNameAll().then((response) => {
      if (response.code !== 200) {
        this.$message.error("查询比赛名称错误");
      }
      for (var i = 0; i < response.data.gamenameList.length; i++) {
        const { id, gameName } = response.data.gamenameList[i];
        this.gamename[i] = gameName;
      }
    });
  },
};
</script>
<style scoped>
.el-table {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* 背景图片 */
.imgBg_box {
  position: absolute;
}
.imgBg {
  position: relative;
  top: -341px;
  left: 1000px;
}
</style>